 <template>
  <div class="order_detail_page">
    <head-top head-title="订单详情" go-back="true"></head-top>
    <section v-if="!showLoading && item" id="scroll_section" class="scroll_container">
      <section class="scroll_insert">
        <section class="order_titel">
          <img src="https://www.jiangsuduotianfangzhikeji.cn/uploads/20231202/fc86afce514f87edca5899270ce1fd67.png" />
          <p>
            {{
                item.status == 1 ? '支付完成' :
                item.status == 2 ? '已出餐' :
                item.status == 3 ? '退款中' :
                '已退款'
            }}
          </p>
          <p>{{item.remarks}}</p>
        </section>
        <section class="food_list">
          <ul class="food_list_ul">
            <li v-for="(items,index) in item.order_detail" :key="index">
              <p class="food_name ellipsis">{{items.name}}</p>
              <div class="quantity_price">
                <span>X{{items.num}}</span>
                <span>¥{{items.price}}</span>
              </div>
            </li>
          </ul>

          <div class="pay_ment">实付{{item.total_price}}</div>
        </section>
        <section class="order_detail_style">
        </section>
        <section class="order_detail_style">
          <header>订单信息</header>
          <section class="item_style">
            <p class="item_left">订单号：</p>
            <div class="item_right">
              <p>{{item.order_id}}</p>
            </div>
          </section>
          <section class="item_style">
            <p class="item_left">支付方式：</p>
            <div class="item_right">
              <p>{{item.pay_way}}</p>
            </div>
          </section>
          <section class="item_style">
            <p class="item_left">下单时间：</p>
            <div class="item_right">
              <p>{{item.ordertime_text}}</p>
            </div>
          </section>
        </section>

      </section>
    </section>
    <transition name="loading">
      <loading v-if="showLoading"></loading>
    </transition>
    <van-dialog
      v-model="showDialog"
      title="评论"
      show-cancel-button
      confirmButtonColor="#3190e8"
      @confirm="submitCommit"
    >
      <van-rate v-model="value" :size="25" color="#ee0a24" void-icon="star" void-color="#eee" />
      <van-field v-model="commit" placeholder="请输入评语" />
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import { Rate, Dialog, Field, Toast } from "vant";

Vue.use(Rate);
Vue.use(Dialog);
Vue.use(Field);
Vue.use(Toast);
import { mapState, mapMutations } from "vuex";
import headTop from "src/components/header/head";
import { getImgPath } from "src/components/common/mixin";
import {
  getOrderDetail,
  submitOrder,
  submitCommit,
  myOrderDetail
} from "src/service/getData";
import loading from "src/components/common/loading";
import BScroll from "better-scroll";
import { imgBaseUrl, myImgBaseUrl } from "src/config/env";

export default {
  data() {
    return {
      value: 0,
      commit: null,
      showDialog: false,
      showLoading: false, //显示加载动画
      item: null,
      imgBaseUrl,
      myImgBaseUrl
    };
  },
  mounted() {
    Toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      loadingType: "spinner"
    });
    this.toGetOrderDetail()
  },
  components: {
    headTop,
    loading
  },
  methods: {
    toGetOrderDetail() {
      myOrderDetail(this.$route.query.order_id)
        .then(res => {
          Toast.clear();
          this.item = res.data.data;
        })
        .catch(err => {
          Toast.clear();
          Toast.fail(err.msg);
        });
    },
    async submitCommit() {
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "请稍等...",
        loadingType: "spinner"
      });
      submitCommit(this.item.order_id, this.value, this.commit)
        .then(res => {
          Toast.clear();
          Toast.success(res.msg);
          this.toGetOrderDetail()
        })
        .catch(err => {
          Toast.clear();
          Toast.fail(err.msg);
        });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10
          ? "0" + (date.getHours())
          : date.getHours()) + ":";
      var m =
        date.getMinutes() + 1 < 10
          ? "0" + (date.getMinutes() + 1)
          : date.getMinutes() + 1;
      var s =
        ":" +
        (date.getSeconds() + 1 < 10
          ? "0" + (date.getSeconds() + 1)
          : date.getSeconds() + 1);
      return Y + M + D + h + m;
    },
    gotpay() {
      let value = [];
      for (let i = 0; i < this.item.detail.length; i++) {
        let item = [
          Number(this.item.detail[i].id),
          this.item.detail[i].menu_number,
          Number(this.item.detail[i].menu_price)
        ];
        value[i] = item;
      }
      submitOrder(
        this.item.infoid,
        this.item.address_id,
        this.item.user_id,
        this.item.total_price,
        this.item.description,
        JSON.stringify(value)
      ).then(res => {
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            appId: res.data.appId, //公众号名称，由商户传入
            timeStamp: res.data.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: res.data.nonceStr, //随机串
            package: res.data.package,
            signType: res.data.signType, //微信签名方式：
            paySign: res.data.paySign //微信签名
          },
          res => {
            this.$router.push("/order");
          }
        );
      });
    }
  },
  computed: {
    ...mapState(["orderDetail", "geohash", "userInfo"])
  }
};
</script>


  <style lang="scss">
.van-dialog__content {
  padding: 1rem;
  box-sizing: border-box;
}
.van-field,
.van-cell {
  padding: 1rem 0 0 0 !important;
  box-sizing: border-box;
}
.van-dialog__confirm {
  background: #3190e8 !important;
  .van-button__text {
    color: white;
  }
}
.van-toast__text,
.van-icon {
  color: white;
}
</style>
<style lang="scss" scoped>
@import "src/style/mixin";

.buttonPay {
  background: #3190e8;
  font-size: 16px;
  color: white;
  width: 90%;
  margin: 20px 5%;
  border-radius: 5px;
  line-height: 40px;
}
.order_detail_page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f1f1f1;
  z-index: 202;
  padding-top: 1.95rem;
  p,
  span {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
}
.scroll_container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 1.95rem;
}
.scroll_insert {
  padding-bottom: 3rem;
}
.order_titel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem;
  background-color: #fff;
  margin-bottom: 0.5rem;
  img {
    border: 0.05rem solid $blue;
    border-radius: 50%;
    @include wh(3rem, 3rem);
  }
  p:nth-of-type(1) {
    @include sc(0.9rem, #333);
    font-weight: bold;
    margin-top: 0.4rem;
  }
  p:nth-of-type(2) {
    @include sc(0.55rem, #999);
    width: 10rem;
    margin-top: 0.3rem;
    text-align: center;
  }
  .order_again {
    @include sc(0.6rem, $blue);
    margin-top: 0.5rem;
    border: 0.025rem solid $blue;
    padding: 0.15rem 0.4rem;
    border-radius: 0.1rem;
  }
}
.food_list {
  background-color: #fff;
  .food_list_header {
    @include fj;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid #f5f5f5;
    .shop_name {
      img {
        @include wh(1.2rem, 1.2rem);
        vertical-align: middle;
        margin-right: 0.2rem;
      }
      span {
        @include sc(0.75rem, #333);
        font-weight: bold;
      }
    }
    svg {
      @include wh(0.6rem, 0.6rem);
      fill: #666;
    }
  }
  .food_list_ul {
    li {
      @include fj;
      align-items: center;
      padding: 0 0.5rem;
      line-height: 2rem;
      .food_name {
        @include sc(0.6rem, #666);
        flex: 4;
      }
      .quantity_price {
        flex: 1;
        @include fj;
        align-items: center;
        span:nth-of-type(1) {
          @include sc(0.6rem, #ccc);
        }
        span:nth-of-type(2) {
          @include sc(0.6rem, #666);
        }
      }
    }
  }
  .deliver_fee {
    @include fj;
    align-items: center;
    padding: 0 0.5rem;
    line-height: 2rem;
    border-top: 1px solid #f5f5f5;
    span {
      @include sc(0.6rem, #666);
    }
  }
  .pay_ment {
    @include sc(0.6rem, #fb6b23);
    border-top: 1px solid #f5f5f5;
    font-weight: bold;
    line-height: 2rem;
    text-align: right;
    padding-right: 0.5rem;
  }
}
.order_detail_style {
  background-color: #fff;
  margin-top: 0.5rem;
  header {
    @include sc(0.75rem, #333);
    padding: 0.5rem;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .item_style {
    display: flex;
    padding: 0.5rem;
    p {
      @include sc(0.65rem, #666);
      line-height: 1rem;
    }
  }
}
.loading-enter-active,
.loading-leave-active {
  transition: opacity 0.7s;
}
.loading-enter,
.loading-leave-active {
  opacity: 0;
}
</style>
